<!doctype html>
<html lang="en">
	<style>
		body{
			margin:0;
		}
		.HolyGrail {
			display: flex;
			min-height: 100vh;
			flex-direction: column;
		}

		header, footer {
			flex: 0 0 auto;
		}

		.HolyGrail-body {
			display: flex;
			flex: 1;
		}

		.HolyGrail-content {
			flex: 1;
		}

		.HolyGrail-nav, .HolyGrail-ads {
			/* 两个边栏的宽度设为12em */
			flex: 0 0 12em;
			background:#ccc;
		}

		.HolyGrail-nav {
			/* 导航放到最左边 */
			order: -1;
		}
	</style>
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>Document</title>
	</head>
	<body class="HolyGrail">
		<header>
			...
			...<br>
			...<br>
			...<br>
			...<br>
			...<br>
			...<br>
		</header>
		<div class="HolyGrail-body">
			<main class="HolyGrail-content">
				...
			</main>
			<nav class="HolyGrail-nav">
				...
			</nav>
			<aside class="HolyGrail-ads">
				...
			</aside>
		</div>
	</body>
</html>
